<div>
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工单号" name="工单号" class="me-2"
      [(ngModel)]="params.JobOrderNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序编码" name="工序编码" class="me-2"
      [(ngModel)]="params.ProcessNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序名称" name="工序名称" class="me-2"
      [(ngModel)]="params.ProcessName">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="物料编码" name="物料编码" class="me-2"
      [(ngModel)]="params.PartNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="物料名称" name="物料名称" class="me-2"
      [(ngModel)]="params.PartName">
    <div class="d-submit">
      <d-button id="primaryBtn" (click)="search()"><i class="icon icon-filter-o me-2"></i>查询</d-button>
      <d-button bsStyle="common" style="margin-left: 8px" (click)="reset()"><i class="icon icon-refresh me-2"></i>重置
      </d-button>
    </div>
  </div>
  <div class="mt-3">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
      [maxHeight]="tableheight" [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
      [resizeable]="true" (checkAllChange)="getCheckedRows()" (rowCheckChange)="getCheckedRows()">
      <thead dTableHead [checkable]="true">
        <tr dTableRow>
          <th dHeadCell [fixedLeft]="colOption.fixedLeft" *ngFor="let colOption of dataTableOptions.columns"
            [title]="colOption.header">{{colOption.header}}
          </th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr dTableRow>
            <td dTableCell [fixedLeft]="'0px'">
              <d-checkbox [disabled]="false" (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
                [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                [ngModel]="rowItem.$checked && (rowItem.$checked || rowItem.$halfChecked)" dTooltip
                [showGlowStyle]="false"></d-checkbox>
            </td>
            <td dTableCell [fixedLeft]="'50px'">
              <span dTooltip [content]="rowItem.jobOrderNum">{{rowItem.jobOrderNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processNumber">{{rowItem.processNumber}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processNum">{{rowItem.processNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processName">{{rowItem.processName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.partNum">{{rowItem.partNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.partName">{{rowItem.partName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.unit">{{rowItem.unit}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.requirementQuantity">{{rowItem.requirementQuantity}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.issuedQuantity">{{rowItem.issuedQuantity}}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <div>
      <p>已选 <span class="underline">{{selectData.length}}</span> 条
        <a (click)="cleared()" class="cleared">清空</a>
      </p>
    </div>
    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="params.PageSize"
      [(pageIndex)]="params.PageNumber" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
